<template>
    <div style="margin-left: 20px">
        <el-row>
            <el-col :span="6">
                <span>项目编号：{{ projectInfo.projectCode }}</span>
            </el-col>
            <el-col :span="6">
                <span>项目名称：{{ projectInfo.projectName }}</span>
            </el-col>
            <el-col :span="6">
                <span>采购类别：{{ projectInfo.categoryName }}</span>
            </el-col>
            <el-col :span="6">
                <span>预算金额：{{ projectInfo.budget }}元</span>
            </el-col>

            <!--          生成采购文件-->
            <el-col :span="24">
                <div style="margin-top: 20px">
                    <span>生成采购文件:</span>
                    <el-button size="small" type="primary" style="margin-left: 10px" @click="createPurchaseFile" :disabled="projectInfo.isSubmit === 1">
                        生成采购文件
                    </el-button>
                    <span style="margin-left: 10px;color: red;font-size: 10px" v-if="projectInfo.isSubmit === 1">成交供应商已提交，无法更改</span>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px" v-if="PurchaseFileList.length > 0">
                    <el-table
                            :data="purchaseFileTableList"
                            border
                            style="width: 50%">
                        <el-table-column
                                prop="generateTime"
                                min-width="130px"
                                label="生成时间">
                        </el-table-column>
                        <el-table-column
                                prop="filename"
                                min-width="170px"
                                label="文件名">
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button type="text" style="text-align: center;margin-left: 7px"
                                           @click="downPurchaseFile(row)">下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="24">
                <upload-file v-if="projectInfo.isArchive === 0" hint="只能上传pdf文件，且不超过200Mb" button-name="上传盖章后的采购文件" file-suffix=".pdf" :is-query="true"
                             :upload-url="uploadPath" :query-click="getAllPurchaseSignedFileTableList"></upload-file>
                <div v-if="projectInfo.isArchive === 1">
                    <span>盖章的采购文件列表</span>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px">
                    <el-table
                            :data="purchaseSignedFileTableList"
                            border
                            style="width: 50%">

                        <el-table-column
                                prop="generateTime"
                                min-width="130px"
                                label="上传时间">
                        </el-table-column>
                        <el-table-column
                                prop="filename"
                                min-width="170px"
                                label="通知书名称">
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button type="text" style="text-align: center;margin-left: 7px"
                                           @click="downPurchaseSignedFile(row)">下载
                                </el-button>
                                <el-button v-if="projectInfo.isArchive === 0" type="text" style="text-align: center; color: red; margin-left: 7px"
                                           @click="deletePurchaseSignedFile(row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script>

import {
    createPurchaseFile, deletePurchaseSigned,
    downPurchaseFile, downPurchaseSignedFile,
    getAllPurchaseFile,
    getAllSignedTable
} from "@/api/shopping/purchaseFileApi";
import UploadFile from "@/components/uploadFile/index.vue";
import {serverIp} from "../../../public/config";
import {downloadResultNotifyFile} from "@/api/shopping/resultNotifa";
import downloadFile from "@/utils/downloadFile";
import axios from "axios";

export default {
    props: {
        projectInfo: {
            type: Object,
            default() {
                return {}
            }
        },
        PurchaseFileList: {
            type: [],
            default() {
                return [];
            }
        },
        purchaseSignedTableList: {
            type: [],
            default() {
                return [];
            }
        },
        required: true
    },
    data() {
        return {
            project: {},
            projectInvitationInfo: {
                inquiryPlace: "",
                inquiryTime: "",
                contactPerson: "",
                contactTel: ""
            },
            purchaseFileTableList: [],
            uploadPath: `${serverIp}/purchase/upload/file/${this.projectInfo.projectId}`,
            purchaseSignedFileTableList: []
        }
    },
    mounted() {
        this.project = this.projectInfo
    },
    components: {
        UploadFile
    },
    watch: {
        projectInfo: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.project = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },
        PurchaseFileList: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.purchaseFileTableList = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },
        purchaseSignedTableList: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.purchaseSignedFileTableList = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },

    },
    methods: {
        // 生成文件
        async createPurchaseFile() {
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await createPurchaseFile(this.project.projectId)
                if (res.data.code === 200) {
                    this.$message.success("成功")
                    await this.getAllPurchaseFileList()
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e.messages)
            } finally {
                this.$loading().close();
            }
        },
        // 下载采购文件
        async downPurchaseFile(row) {
            this.$loading({
                fullscreen: true,
            });
            try {
                this.$message.success("正在拼命下载请稍后")
                let res = await downPurchaseFile(row.id)
                downloadFile(res, row.filename)
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        },
        // 获得生成的采购文件列表
        async getAllPurchaseFileList() {
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await getAllPurchaseFile(this.project.projectId);
                if (res.data.code === 200) {
                    this.PurchaseFileList = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        },
        // 下载盖章文件
        async downPurchaseSignedFile(row) {
            this.$loading({
                fullscreen: true,
            });
            try {
                this.$message.success("正在拼命下载请稍后")
                // let res = await axios.get(serverIp + "/purchase/download/signed/" + row.id, {
                //     responseType: 'blob', // 返回
                //     headers:{
                //         Authorization: localStorage.getItem("token")
                //     },
                // })
                let res = await downPurchaseSignedFile(row.id)
                downloadFile(res,row.filename)
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        },
        // 获得盖章的采购文件列表
        async getAllPurchaseSignedFileTableList(){
            try {
                let res = await getAllSignedTable(this.project.projectId);
                if (res.data.code === 200) {
                    this.purchaseSignedTableList = res.data.data;
                } else {
                    this.PurchaseFileList = []
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 删除文件
        async deletePurchaseSignedFile(row) {
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await deletePurchaseSigned(row.id)
                if (res.data.code === 200) {
                    this.$message.success("成功")
                    await this.getAllPurchaseSignedFileTableList()
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        }

    }
}

</script>

<style scoped>

</style>
